 <template>
  <el-card :body-style="{ padding: '0px'}" shadow="never" class="ec-card">
    <el-row>
      <el-col :span="24">
        <img :src="data.basicThumbnails" alt="">
      </el-col>
    </el-row>
    <p class="title" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{data.basicTitle}}</p>
    <!-- <p>{{data.basicTitle}}</p> -->
    <el-row style="margin-bottom: 5px;">
      <el-col :span="24" style="white-space: nowrap;min-height: 32px;">
        <el-tag type="success" v-for="tag in removeTags(data.tags)" style="margin-right: 5px;margin-left: 0;" :key="tag.tagId">{{tag.tagName}}</el-tag>
      </el-col>
    </el-row>
    <el-row v-show="!isMap">
      <el-col :span="8" class="ec-card-border">
        <p>{{data.browseNumber}}</p>
        <p>浏览</p>
      </el-col>
      <el-col :span="8" class="ec-card-border">
        <p>{{data.likeNumber}}</p>
        <p>点赞</p>
      </el-col>
      <el-col :span="8" class="ec-card-border">
        <p>{{data.comments}}</p>
        <p>评论</p>
      </el-col>

    </el-row>
    <div class="over-card contentshow" @click="goEc()">
      <p>企业简介:</p>
      <p>{{data.basicDescription}}</p>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "ec-card",
  title: "企业卡片",
  props: {
    info: {},
    isMap: {}
  },
  data () {
    return {
      data: {}
    }
  },
  mounted () {
    this.assignObj()
  },
  methods: {
    goEc () {
      const {href} = this.$router.resolve({
        name: 'echome',
        params: {id: this.$compileStr(this.data.modelId)}
      })
      window.open(href, '_blank')
    },
    assignObj () {
      this.data = Object.assign({}, this.info)
      if (this.data.tags && typeof this.data.tags === 'string') {
        this.data.tags = JSON.parse(this.data.tags)
      }
    },
    removeTags (tags) {
      // 30
      let newTag = []
      let len = 0
      if (tags) {
        for (var i = 0; i < tags.length; i++) {
          len = len + tags[i].tagName.length + 2
          if (len < 25) {
            newTag.push(tags[i])
          }
        }
      }
      return newTag
    }
  },
  watch: {
    'info': {
      handler () {
        this.assignObj()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
  .ec-card {
    padding-top: 20px;
    position: relative;
    // height: 250px;
    img {
      width: 100px;
      height: 100px;
    }

    p {
      text-align: center;
    }

    .el-col {
      text-align: center;
      font-size: 12px;
      color: #161616;
      p {
        margin: 6px;
      }
      p:nth-child(1) {
        color: #7fa31e;
      }
    }
    .ec-card-border {
      border: 1px solid #ececec;
    }
    .title {
      margin: 10px 0  20px 0;
      font-weight: bold;
      font-size: 26px;
      color: #161616;
    }
    .over-card {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0;
      right: 0;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
      background: rgba(0,0,0,0.7);
      cursor: pointer;
      z-index: 10;
      color: #fff;
      p:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        margin: 8px 0;
        text-align: left;
      }
      p:nth-child(2) {
        font-size: 14px;
        font-weight: normal;
        margin: 0;
        /* autoprefixer: on */
        overflow: hidden;
        /* autoprefixer: on */
        text-overflow: ellipsis;
        line-height: 25px;
        word-break: break-all;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        /*! autoprefixer: off */
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        display:-moz-box;
        /*! autoprefixer: off */
        -moz-box-orient:vertical;
        -webkit-line-clamp: 7; /** 显示的行数 **/
      }
    }
    .contentshow {
      display: none;
    }
    &:hover {
      .contentshow {
        display: inherit;
      }
    }

  }
</style>
